import React from 'react'
import { motion } from 'framer-motion'

// 真人京剧演员基础组件
export const OperaCharacter = ({ 
  type = 'dan', // 旦角、生角、净角、丑角
  size = 'medium',
  position = 'center',
  animated = true,
  className = ''
}) => {
  const sizeClasses = {
    small: 'w-16 h-20',
    medium: 'w-24 h-32',
    large: 'w-32 h-40',
    xl: 'w-48 h-60'
  }

  const positionClasses = {
    left: 'left-4',
    center: 'left-1/2 transform -translate-x-1/2',
    right: 'right-4'
  }

  const characterStyles = {
    dan: {
      // 淡雅色调 - 降低饱和度
      faceColor: '#F8F6F0',        // 米白色底妆
      eyeColor: '#B8866B',         // 淡雅朱红色眼影
      lipColor: '#B8866B',        // 淡雅朱红色嘴唇
      headdressColor: '#6B8E9B',   // 淡雅天蓝色头饰
      costumeColor: '#B8866B',     // 淡雅朱红色戏服
      sleeveColor: '#6B8E9B',     // 淡雅天蓝色袖子
      accentColor: '#D4B896',     // 淡雅金黄色点缀
      mintColor: '#A8C8B8',       // 淡雅薄荷绿装饰
      name: '旦角'
    },
    sheng: {
      faceColor: '#F8F6F0',
      eyeColor: '#6B8E9B',
      lipColor: '#6B8E9B',
      headdressColor: '#5A6B7A',
      costumeColor: '#6B8E9B',
      sleeveColor: '#5A6B7A',
      accentColor: '#D4B896',
      mintColor: '#A8C8B8',
      name: '生角'
    },
    jing: {
      faceColor: '#F8F6F0',
      eyeColor: '#B8866B',
      lipColor: '#B8866B',
      headdressColor: '#B8866B',
      costumeColor: '#5A6B7A',
      sleeveColor: '#B8866B',
      accentColor: '#D4B896',
      mintColor: '#A8C8B8',
      name: '净角'
    },
    chou: {
      faceColor: '#F8F6F0',
      eyeColor: '#D4B896',
      lipColor: '#D4B896',
      headdressColor: '#D4B896',
      costumeColor: '#6B8E9B',
      sleeveColor: '#D4B896',
      accentColor: '#B8866B',
      mintColor: '#A8C8B8',
      name: '丑角'
    }
  }

  const style = characterStyles[type]

  return (
    <motion.div
      className={`absolute ${positionClasses[position]} ${sizeClasses[size]} ${className}`}
      animate={animated ? {
        y: [0, -10, 0],
        rotate: [0, 2, -2, 0],
        scale: [1, 1.05, 1]
      } : {}}
      transition={{
        duration: 4,
        repeat: Infinity,
        ease: "easeInOut"
      }}
    >
      {/* 真人京剧演员主体 */}
      <div className="relative w-full h-full">
        {/* 华丽头饰 */}
        <motion.div
          className="absolute top-0 left-1/2 transform -translate-x-1/2 w-10 h-8 rounded-t-full"
          style={{ backgroundColor: style.headdressColor }}
          animate={animated ? {
            rotate: [0, 3, -3, 0]
          } : {}}
          transition={{
            duration: 3,
            repeat: Infinity,
            ease: "easeInOut"
          }}
        >
          {/* 头饰装饰 */}
          <div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full"
               style={{ backgroundColor: style.accentColor }}></div>
          <div className="absolute top-2 left-1/4 w-1 h-1 rounded-full"
               style={{ backgroundColor: style.mintColor }}></div>
          <div className="absolute top-2 right-1/4 w-1 h-1 rounded-full"
               style={{ backgroundColor: style.mintColor }}></div>
        </motion.div>

        {/* 面部妆容 */}
        <motion.div
          className="absolute top-6 left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
          style={{ backgroundColor: style.faceColor }}
          animate={animated ? {
            scale: [1, 1.02, 1]
          } : {}}
          transition={{
            duration: 2,
            repeat: Infinity,
            ease: "easeInOut"
          }}
        >
          {/* 眼影 */}
          <div className="absolute top-1 left-1 w-2 h-1 rounded-full"
               style={{ backgroundColor: style.eyeColor, opacity: 0.8 }}></div>
          <div className="absolute top-1 right-1 w-2 h-1 rounded-full"
               style={{ backgroundColor: style.eyeColor, opacity: 0.8 }}></div>
          {/* 嘴唇 */}
          <div className="absolute bottom-1 left-1/2 transform -translate-x-1/2 w-2 h-1 rounded-full"
               style={{ backgroundColor: style.lipColor }}></div>
        </motion.div>

        {/* 戏服身体 */}
        <motion.div
          className="absolute top-12 left-1/2 transform -translate-x-1/2 w-8 h-12 rounded-lg"
          style={{ backgroundColor: style.costumeColor }}
          animate={animated ? {
            x: [0, 2, -2, 0]
          } : {}}
          transition={{
            duration: 5,
            repeat: Infinity,
            ease: "easeInOut"
          }}
        >
          {/* 戏服装饰 */}
          <div className="absolute top-2 left-1/2 transform -translate-x-1/2 w-1 h-1 rounded-full"
               style={{ backgroundColor: style.accentColor }}></div>
          <div className="absolute top-4 left-1 w-1 h-1 rounded-full"
               style={{ backgroundColor: style.mintColor }}></div>
          <div className="absolute top-4 right-1 w-1 h-1 rounded-full"
               style={{ backgroundColor: style.mintColor }}></div>
        </motion.div>

        {/* 水袖 */}
        <motion.div
          className="absolute top-14 left-1 w-3 h-8 rounded-full"
          style={{ backgroundColor: style.sleeveColor }}
          animate={animated ? {
            rotate: [0, 15, -15, 0],
            x: [0, 3, -3, 0]
          } : {}}
          transition={{
            duration: 4,
            repeat: Infinity,
            ease: "easeInOut"
          }}
        />
        <motion.div
          className="absolute top-14 right-1 w-3 h-8 rounded-full"
          style={{ backgroundColor: style.sleeveColor }}
          animate={animated ? {
            rotate: [0, -15, 15, 0],
            x: [0, -3, 3, 0]
          } : {}}
          transition={{
            duration: 4,
            repeat: Infinity,
            ease: "easeInOut"
          }}
        />

        {/* 装饰性流苏 */}
        <motion.div
          className="absolute top-20 left-1/2 transform -translate-x-1/2 w-1 h-2 rounded-full"
          style={{ backgroundColor: style.accentColor }}
          animate={animated ? {
            scale: [1, 1.2, 1],
            opacity: [0.6, 1, 0.6]
          } : {}}
          transition={{
            duration: 2,
            repeat: Infinity,
            ease: "easeInOut"
          }}
        />
      </div>
    </motion.div>
  )
}

// 京剧人物群组组件
export const OperaCharacterGroup = ({ 
  characters = ['dan', 'sheng', 'jing'],
  className = '',
  animated = true 
}) => {
  return (
    <div className={`relative w-full h-40 ${className}`}>
      {characters.map((type, index) => (
        <OperaCharacter
          key={index}
          type={type}
          size="medium"
          position={index === 0 ? 'left' : index === 1 ? 'center' : 'right'}
          animated={animated}
        />
      ))}
    </div>
  )
}

// 京剧人物舞蹈动作组件
export const OperaDance = ({ 
  type = 'dan',
  action = 'basic',
  size = 'large',
  className = ''
}) => {
  const danceActions = {
    basic: {
      y: [0, -20, 0],
      rotate: [0, 5, -5, 0],
      scale: [1, 1.1, 1]
    },
    spin: {
      rotate: [0, 360],
      scale: [1, 1.2, 1]
    },
    wave: {
      y: [0, -15, 0],
      x: [0, 10, -10, 0],
      rotate: [0, 10, -10, 0]
    },
    bow: {
      y: [0, 10, 0],
      rotate: [0, 5, 0]
    },
    gesture: {
      y: [0, -10, -5, -15, 0],
      rotate: [0, 2, -1, 1, 0],
      scale: [1, 1.05, 1.1, 1.02, 1]
    },
    sleeve: {
      rotate: [0, 15, -10, 8, 0],
      x: [0, 5, -3, 2, 0]
    },
    turn: {
      rotate: [0, 90, 180, 270, 360],
      scale: [1, 1.05, 1.1, 1.05, 1]
    },
    pose: {
      y: [0, -8, -12, -6, -10, 0],
      scale: [1, 1.08, 1.12, 1.05, 1.1, 1]
    },
    step: {
      x: [0, 5, 0, -5, 0],
      y: [0, -3, -6, -3, 0]
    },
    hand: {
      rotate: [0, 10, -5, 8, 0],
      scale: [1, 1.1, 1.05, 1.08, 1]
    }
  }

  const actionConfig = danceActions[action]

  return (
    <motion.div
      className={`relative ${className}`}
      animate={actionConfig}
      transition={{
        duration: action === 'turn' ? 8 : action === 'gesture' ? 6 : 4,
        repeat: Infinity,
        ease: "easeInOut"
      }}
    >
      <OperaCharacter
        type={type}
        size={size}
        animated={false}
      />
    </motion.div>
  )
}

// 京剧人物背景装饰组件
export const OperaBackground = ({ 
  characters = ['dan', 'sheng'],
  opacity = 0.3,
  className = ''
}) => {
  return (
    <div className={`absolute inset-0 ${className}`}>
      {characters.map((type, index) => (
        <motion.div
          key={index}
          className="absolute"
          style={{
            top: `${20 + index * 30}%`,
            left: `${10 + index * 40}%`,
            opacity: opacity
          }}
          animate={{
            y: [0, -20, 0],
            rotate: [0, 5, -5, 0]
          }}
          transition={{
            duration: 8 + index * 2,
            repeat: Infinity,
            ease: "easeInOut"
          }}
        >
          <OperaCharacter
            type={type}
            size="large"
            animated={false}
          />
        </motion.div>
      ))}
    </div>
  )
}

// 京剧人物加载动画组件
export const OperaLoadingCharacter = ({ 
  type = 'dan',
  size = 'xl',
  className = ''
}) => {
  return (
    <motion.div
      className={`flex items-center justify-center ${className}`}
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ 
        opacity: 1, 
        scale: 1,
        rotate: [0, 360]
      }}
      transition={{
        opacity: { duration: 1 },
        scale: { duration: 1 },
        rotate: { duration: 3, repeat: Infinity, ease: "linear" }
      }}
    >
      <OperaDance
        type={type}
        action="spin"
        size={size}
      />
    </motion.div>
  )
}

// 京剧人物装饰线条组件
export const OperaCharacterLine = ({ 
  characters = ['dan', 'sheng', 'jing'],
  direction = 'horizontal',
  className = ''
}) => {
  const directionClasses = {
    horizontal: 'flex-row space-x-8',
    vertical: 'flex-col space-y-8'
  }

  return (
    <div className={`flex ${directionClasses[direction]} ${className}`}>
      {characters.map((type, index) => (
        <motion.div
          key={index}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: index * 0.2 }}
        >
          <OperaCharacter
            type={type}
            size="medium"
            animated={true}
          />
        </motion.div>
      ))}
    </div>
  )
}
